import React from 'react';
import { cx, css } from 'emotion';

import { icons, IconsType } from '../share';

import styles from './component.module.less';

type MenuIconProps = {
  type?: IconsType;
  text?: string;
  active?: boolean;
  dropdown?: boolean;
  iconValue?: string;
} & React.HTMLAttributes<HTMLSpanElement>;

export const MenuIcon: React.FC<MenuIconProps> = ({ type, active, dropdown, iconValue, text, ...props }) => {
  return (
    <span {...props} className={cx(styles.menuIcon)}>
      <button type="button" className={cx(styles.icon, active ? styles.active : '')}>
        {type ? (
          icons[type](iconValue)
        ) : (
          <span
            style={{
              lineHeight: 2,
            }}
          >
            {text}
          </span>
        )}
        {dropdown ? <span className={styles.iconDropdown}></span> : null}
      </button>
    </span>
  );
};
